@use 'sass:color';

// Color scheme: https://coolors.co/222222-fffbfe-b57ba6-62929e-ff4000
@use '@material/theme/index' as theme with (
  $primary: #b57ba6,
  $secondary: #62929e,
  $surface: #222222,
  $background: #000000,
  $error: #ff4000
);

// More dense default scale.
@use '@material/density/index' as density with (
  $default-scale: -1
);

// Custon animation curves.
@use '@material/animation/index' as animation with (
  $deceleration-curve-timing-function: cubic-bezier(0, 0.5, 0.1, 1),
  $standard-curve-timing-function: cubic-bezier(0.6, 0, 0.4, 1),
  $acceleration-curve-timing-function: cubic-bezier(0.5, 0, 1, 0.7),
  $sharp-curve-timing-function: cubic-bezier(0.6, 0, 0.4, 1)
);

// Increase border radii.
@use '@material/shape/index' as shape with (
  $small-component-radius: 8px,
  $medium-component-radius: 15px,
  $large-component-radius: 20px
);

// Increase elevations.
@use '@material/elevation/index' as elevation with (
  $umbra-map: (
    0: '0px 0px 0px 0px',
    1: '0px 3px 3px -2px',
    2: '0px 2px 4px -1px',
    3: '0px 3px 5px -1px',
    4: '0px 3px 5px -1px',
    5: '0px 4px 5px -2px',
    6: '0px 5px 5px -3px',
    7: '0px 5px 6px -3px',
    8: '0px 6px 6px -3px',
    9: '0px 6px 7px -4px',
    10: '0px 7px 8px -4px',
    11: '0px 7px 8px -4px',
    12: '0px 7px 9px -4px',
    13: '0px 8px 9px -5px',
    14: '0px 8px 10px -5px',
    15: '0px 8px 11px -5px',
    16: '0px 9px 11px -5px',
    17: '0px 9px 12px -6px',
    18: '0px 10px 13px -6px',
    19: '0px 10px 13px -6px',
    20: '0px 10px 14px -6px',
    21: '0px 11px 14px -7px',
    22: '0px 11px 15px -7px',
    23: '0px 11px 16px -7px',
    24: '0px 12px 16px -8px',
  ),
  $penumbra-map: (
    0: '0px 0px 0px 0px',
    1: '0px 3px 4px 0px',
    2: '0px 4px 5px 0px',
    3: '0px 5px 8px 0px',
    4: '0px 6px 10px 0px',
    5: '0px 7px 10px 1px',
    6: '0px 8px 10px 1px',
    7: '0px 9px 12px 1px',
    8: '0px 10px 14px 1px',
    9: '0px 11px 15px 1px',
    10: '0px 12px 17px 2px',
    11: '0px 13px 19px 2px',
    12: '0px 14px 21px 2px',
    13: '0px 15px 22px 2px',
    14: '0px 16px 24px 2px',
    15: '0px 17px 26px 2px',
    16: '0px 18px 28px 2px',
    17: '0px 19px 29px 2px',
    18: '0px 20px 31px 3px',
    19: '0px 21px 33px 3px',
    20: '0px 22px 35px 3px',
    21: '0px 23px 36px 3px',
    22: '0px 24px 38px 3px',
    23: '0px 25px 40px 3px',
    24: '0px 26px 41px 4px',
  ),
  $ambient-map: (
    0: '0px 0px 0px 0px',
    1: '0px 1px 8px 0px',
    2: '0px 1px 10px 0px',
    3: '0px 1px 14px 0px',
    4: '0px 1px 18px 0px',
    5: '0px 2px 16px 1px',
    6: '0px 3px 14px 2px',
    7: '0px 3px 16px 2px',
    8: '0px 4px 18px 3px',
    9: '0px 4px 20px 3px',
    10: '0px 5px 22px 4px',
    11: '0px 5px 24px 4px',
    12: '0px 5px 26px 4px',
    13: '0px 6px 28px 5px',
    14: '0px 6px 30px 5px',
    15: '0px 6px 32px 5px',
    16: '0px 7px 34px 6px',
    17: '0px 7px 36px 6px',
    18: '0px 8px 38px 7px',
    19: '0px 8px 40px 7px',
    20: '0px 8px 42px 7px',
    21: '0px 9px 44px 8px',
    22: '0px 9px 46px 8px',
    23: '0px 9px 48px 9px',
    24: '0px 10px 50px 9px',
  )
);

// Use custom fonts.
@use '@material/typography' with (
  $font-family: unquote('Verdana, Geneva, sans-serif'),
  $styles-headline1: (
    font-family: unquote('Tahoma, sans-serif'),
    letter-spacing: 0,
  ),
  $styles-headline2: (
    font-family: unquote('Tahoma, sans-serif'),
    letter-spacing: 0,
  ),
  $styles-headline3: (
    font-family: unquote('Tahoma, sans-serif'),
    letter-spacing: 0,
  ),
  $styles-headline4: (
    font-family: unquote('Tahoma, sans-serif'),
    letter-spacing: 0,
  ),
  $styles-headline5: (
    letter-spacing: 0,
  ),
  $styles-headline6: (
    letter-spacing: 0,
  ),
  $styles-subtitle1: (
    letter-spacing: 0,
  ),
  $styles-subtitle2: (
    letter-spacing: 0,
  ),
  $styles-body1: (
    letter-spacing: 0,
  ),
  $styles-body2: (
    letter-spacing: 0,
  ),
  $styles-caption: (
    letter-spacing: 0,
  ),
  $styles-button: (
    letter-spacing: 0,
  ),
  $styles-overline: (
    letter-spacing: 0,
  )
);

html,
body {
  background-color: theme.$background;
  color: theme.$on-surface;
}

// Be more specific than the _Typography.scss file.
html code,
html pre {
  font-family: 'Courier New', Courier, monospace;
}

// Color scheme: https://coolors.co/f6f7eb-e94f37-393e41-3f88c5-44bba4
a {
  color: #3f88c5;
}
a:visited {
  color: #44bba4;
}
